DAY3 聖杯布局 - 三個欄的C位爭奪戰(上) - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 3

Modern Web

前端幼鳥三十天養成記系列第 3 篇

DAY3 聖杯布局 - 三個欄的C位爭奪戰(上)

13th鐵人賽聖杯布局雙飛翼布局

ChihBird稚鳥

2021-09-08 07:29:53

1925 瀏覽

分享至

聖杯和雙飛翼，是布局PC常見的方法。上下有header,footer，中間三欄center,left,right並排。
明天會總結兩個的不同，內容有點硬，堅持住看完壓!!各位幼鳥加油唷~~
html布局

基本盤

有點不太懂可以看個DAY1
聖杯html的基本結構是，<main>、<aside id="left">、<aside id="right">

用父元素<div id="container">包起來這三個
三個都有屬性class:"column"

css的第一步設定是

Reset margin=0 padding=0
設定left right寬度(自訂)
設定<main> width:100%;

<body>
    <header>header</header>
    <div id="container">
        <main class="column">也可以叫他center <br> 放在最前面是為了SEO</main>
        <aside id="left" class="column">left</aside>
        <aside id="right" class="column">right</aside>
	</div>
	<footer>footer</footer>
</body>

body, h1, h2, h3, p, ul, ol, li, th, td, img{
    margin: 0px;padding: 0px;
}    /*去margin padding 可以複習day1*/
header{
    text-align: center;
    background-color:aquamarine;
}
main{
    background-color: black;
    width: 100%;
    color: darkgrey;
}
#left{
    background-color:crimson;
    width: 300px;
}
#right{
    background-color: cadetblue;
    width: 200px;
 }
footer{
    background-color:darkgoldenrod;
}

聖杯step1建立5個div

Float毒和它的解藥-Clear

聖杯和雙飛翼都需要用到前一篇的float。不記得float的小小鳥姊送你個回DAY2的通道。
有個前端傳說：float是魔鬼專門影響別人，clear是小白只會影響自身。~~法力有點弱餒clear。~~前一篇說過，float會影響到後面元素的排版，很明顯footer準備遭殃了。幼鳥們來幫他煉製解藥吧

.column{
    float:left;
    height:100px;  /*讓三欄等高*/
}
footer{
	clear:left;
}

聖杯step2中間三欄float 幫footer clear

拔拔幫你管 - 父元素處理中間欄大小自適應

#container{
	padding-left:300px;   /*左邊欄寬*/
	padding-right:200px;  /*右邊欄寬*/
}

將<main>的父元素<div id="container">設定左邊padding=左邊欄寬，右邊padding=右邊欄寬。
雖然<main><aside id="left"><aside id="right">有float屬性，父元素是塌陷的，但對子元素還是有那麼點影響力的。

插個話 ?稚鳥的疑惑?

看到網路上有人說聖杯是用padding，但其實我用margin實作結果一樣。希望有看到的大神可以告訴我為甚麼一定要用padding，而不使用或比較不建議使用margin的原因~~tks
聖杯step3空出左右空位

左欄、右欄不要皮了回去位置上坐好 - margin負值

margin負值，是一個稚鳥覺得有點tricky的地方，要耗點腦力理解地~~

margin-left、margin-top：元素直接向上、左移動
margin-right、margin-bottom：元素不動，自身寬度在外界看起來少了x單位

#left{
	position:relative;
	margin-left:-100%;  /*padding最小為0,所以不要問為甚麼不用padding-left*/
	left:-300px;   /*左邊欄寬*/
}
#right{
	margin-right:-200px;  /*右邊欄寬*/
}

margin-left:-100%，與<main>的起點對齊，覆蓋在<main>上方。
再用left：-300px往前拉到位，前面需加position:relative，要不然沒意義。
margin-right:-200px，外界看起來少200px=隱形，不占空間。但自身不受影響，所以還是看的到。

聖杯step最後兩邊歸隊

看的到的隱形<aside id="right">為甚麼會往上跑?

在還沒有設置container 時，因為「紅紅」跑去「小黑」上面(透過margin-left:-100%:)，「藍灰」應該順勢黏到「小黑」屁股後面。不過有container，「藍灰」只好被迫擠下去。
因為margin-right:-200px，「藍灰」瞬間變阿飄，成為「小黑」專屬背後靈。
聖杯解釋marginRight負值
聖杯解釋marginRight負值_取消